<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2021/11/22
  Time: 13:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<br>
<div class="layui-main">
    <div class="layui-row">
        <h1 style="text-align: center;font-size: 35px">练习系统</h1><br><br>
    </div>
    <form action="login" method="post" id="loginForm" class="layui-form" style="text-align: center">
        <div class="layui-form-item">
            <div class="layui-row">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="uname" id="uname" class="layui-input" autocomplete="off" placeholder="请输入用户名" value="${messageModel.object.userName}">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密 码</label>
            <div class="layui-input-block">
                <input type="password" name="upwd" id="upwd" class="layui-input" lay-verify="title" autocomplete="off" placeholder="请输入密码" value="${messageModel.object.userPwd}">
            </div>
        </div>
        <br>
        <!--姓名：<input type="text" name="uname" id="uname" class="layui-input" placeholder="请输入用户名" value="${messageModel.object.userName}"> <br>
        密 码<input type="password" name="upwd" id="upwd" class="layui-input" value="${messageModel.object.userPwd}"> <br>-->
        <span id="msg" style="font-size: 12px;color: red">${messageModel.msg}</span> <br>
        <button class="layui-btn layui-btn-lg" id="loginBtn">登录</button>
    </form>
</div>
</body>
<style>
    .box{
        width: 400px;
        height: 300px;
        border: 2px solid black;
        /* 把元素变成定位元素 */
        position: absolute;
        /* 元素距离上，左都为50% */
        left: 50%;
        top: 50%;
        /* 让元素的左外边距，上外边距为元素宽高的1/2 注意margin是负距*/
        margin-top: -150px;
        margin-left: -200px;
    }
</style>
<%-- 引入Jquery的JS文件 --%>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<%-- 此处使用到jQuery技术栈 --%>
<script type="text/javascript">
    /**
     * 登录表单验证
     1. 给登录按钮绑定点击事件(通过id选择器绑定)
     2. 获取用户姓名和密码的值
     3. 判断姓名是否为空
            如果姓名为空，提示用户（span标签赋值），并且return
     4. 判断密码是否为空
             如果密码为空，提示用户（span标签赋值），并且return
     5. 如果都不为空，则手动提交表单
     */
    $("#loginBtn").click(function () {
        //获取用户姓名和密码的值
        var uname = $("#uname").val();
        var upwd = $("#upwd").val();
        //判断姓名是否为空
        if(isEmpty(uname)){
            //如果姓名为空，提示用户（span标签赋值），并且return    html()
            $("#msg").html("用户姓名不可为空");
            return;
        }
        //判断密码是否为空
        if(isEmpty(upwd)){
            //如果密码为空，提示用户（span标签赋值），并且return    html()
            $("#msg").html("用户密码不可为空");
            return;
        }
        //如果都不为空，则手动提交表单
        $("#loginForm").submit();
    });


    /**
     * 判断字符串是否为空
     *      如果为空，返回true
     *      如果不为空，返回false
     * @param str
     * @returns {boolean}
     */
    function isEmpty(str) {
        if (str==null || str.trim() == ""){
            return true;
        }
        return false;
    }
    
</script>
</html>
